<template>
	<div class="home">
		<div class="container">
			<div class="left card">
				<Catalogue
					title="专利查询平台"
					:list="catalogue"
				/>
			</div>
			<div class="right card">
				<h2>平台介绍</h2>
				<div class="intro">{{INTRODUCTION_TO_PLATFORM}}</div>

				<!-- 图表 -->
				<h2>关系图</h2>
				<div class="intro">
					<span>{{IPC_CONTROL}}</span>
					<el-select
						class="ipc-select"
						v-model="nodeNames"
						size="small"
						placeholder="请选择分类号"
						filterable
						multiple
						collapse-tags
						multiple-limit="5"
						@change="paintCharts"
					>
						<el-option
							v-for="node in nodes"
							:key="node.id"
							:label="node.name"
							:value="node.id"
						/>
					</el-select>
				</div>

				<div id="charts" />

				<h2>专利查询</h2>
				<div class="intro">{{INTRODUCTION_TO_PATENT_ENQUIRY}}</div>

				<div
					v-for="kind in [PATENT_ENQUIRY,IPC_INQUIRE]"
					:key="kind.name"
				>
					<h2 :id="kind.name">{{kind.name}}</h2>
					<ul>
						<li
							class="item"
							v-for="(item,i) in kind.urls"
							:key="i"
						>
							<span>{{item.status}}</span>
							<a
								:href="item.url"
								target="_blank"
							>
								{{item.name}}
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { INTRODUCTION_TO_PLATFORM, IPC_CONTROL, INTRODUCTION_TO_PATENT_ENQUIRY, IPC_INQUIRE, PATENT_ENQUIRY } from '@/store/data'
import Catalogue from '@/components/Catalogue'
import sourceData from '@/assets/test.json'
export default {
  data() {
    return {
      INTRODUCTION_TO_PLATFORM,
      IPC_CONTROL,
      PATENT_ENQUIRY,
      IPC_INQUIRE,
      INTRODUCTION_TO_PATENT_ENQUIRY,
      catalogue: [
        { text: '平台介绍', url: '平台介绍' },
        { text: '分类号关系图', url: '分类号关系图' },
        { text: PATENT_ENQUIRY.name, url: PATENT_ENQUIRY.name },
        { text: IPC_INQUIRE.name, url: IPC_INQUIRE.name },
      ],
      nodes: sourceData.nodes,
      nodeNames: [sourceData.nodes[ 0 ].name]
    }
  },
  components: {
    'Catalogue': Catalogue
  },
  mounted() {
    this.paintCharts()
  },
  methods: {
    async paintCharts() {
      const myChart = echarts.init(document.getElementById('charts'))

      myChart.showLoading()
      const categories = sourceData.categories
      /* 找相关的节点 */
      const nodeMap = {}
      const links = sourceData.links.filter(link => {
        /* 判断是否选中 */
        const isChoose = this.nodeNames.find(name => name === link.source || name === link.target)

        if (isChoose) {
          nodeMap[ link.source ] = 1
          nodeMap[ link.target ] = 1
          return true
        }
        return false
      })
      const nodes = sourceData.nodes.filter(node => nodeMap[ node.name ] === 1)

      nodes.forEach((node) => {
        node.symbolSize = 10
      })
      myChart.hideLoading()
      myChart.setOption({
        title: {
          text: 'IPC分类号网可视化',
          top: 'bottom',
          left: 'right'
        },
        tooltip: {
          formatter: (item) => {
            const data = item.data

            if (data.indegree) {
              return `
                <p>${ item.marker }${ data.id }</p>
                <p>indegree: ${ data.indegree }</p>
                <p>outdegree: ${ data.outdegree }</p>
              `
            } else {
              return ''
            }
          }
        },
        legend: [{
          data: categories.map(function(a) {
            return a.name
          })
        }],
        series: [
          {
            type: 'graph',
            edgeSymbol: ['none', 'arrow'],
            edgeSymbolSize: 5,
            zoom: 1,
            data: nodes,
            links: links,
            categories: categories,
            label: {
              position: 'right'
            },
            lineStyle: {
              opacity: 0.2
            },
            roam: true, // 可缩放漫游
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  $leftWidth: 150px;

  min-height: 100vh;
  padding-top: $navHeight;
  background-color: $white1;

  .container {
    min-width: 600px;
    max-width: 1100px;
    margin: 10px auto;

    .left,
    .right {
      @include card;
    }

    .left {
      position: absolute;
      width: $leftWidth;
    }

    .right {
      margin-left: calc(#{$leftWidth} + 10px);

      .intro {
        position: relative;
        margin: 5px 0;
        text-indent: 2em;
      }

      .ipc-select {
        position: absolute;
        right: 0;
        width: 200px;
        text-indent: 0;
      }

      #charts {
        width: 100%;
        height: 400px;
      }

      ul {
        margin: 10px 20px;
      }

      .item {
        margin: 5px 0;

        span {
          display: inline-block;
          width: 60px;
          margin-right: 5px;
          text-align: right;
        }

        a {
          color: $blue;
          text-decoration: underline;
        }
      }
    }
  }
}
</style>
